<template>
  <div class="maincontent">
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="first">
        <div style="padding:4px;">
          <div class="investmentSituation">
            <div class="maintitle">各大工程投资情况</div>
            <div class="investmentmsg">
              <div class="totalInvestment">
                <div class="contentbox">
                  <div class="title">工程总投资</div>
                  <div class="value">
                    {{projectData.projectInvestmentInfo.totalInvestment}}
                    <span>万元</span>
                  </div>
                </div>
                <span class="youjiantou"></span>
              </div>
              <div class="childInvestment" style="margin-right:20px;">
                <div class="leftbox" style="background:#3DA7F8;">
                  <div class="contentbox">
                    <div class="title">工程施工费</div>
                    <div class="value">
                      {{projectData.projectInvestmentInfo.totalNum}}
                      <span>万元</span>
                    </div>
                  </div>
                </div>
                <div class="rightbox">
                  <div
                    class="item-content"
                  >田间道路工程费：{{projectData.projectInvestmentInfo.roadProjectCost}}万元</div>
                  <div
                    class="item-content"
                  >土地平整工程费：{{projectData.projectInvestmentInfo.landLevelingProjectCost}}万元</div>
                  <div
                    class="item-content"
                  >农田水利工程费：{{projectData.projectInvestmentInfo.waterConservancyProjectCost}}万元</div>
                  <div
                    class="item-content"
                  >生态保护工程费：{{projectData.projectInvestmentInfo.ecologicalProtectionProjectCost}}万元</div>
                  <div
                    class="item-content"
                  >其他施工费：{{projectData.projectInvestmentInfo.otherConstructionCost}}万元</div>
                </div>
                <div style="clear:both;"></div>
              </div>
              <div class="childInvestment">
                <div class="leftbox" style="background:#09D3F2;">
                  <div class="contentbox">
                    <div class="title">其他</div>
                    <div class="value">
                      {{projectData.projectInvestmentInfo.totalCost}}
                      <span>万元</span>
                    </div>
                  </div>
                </div>
                <div class="rightbox">
                  <div class="item-content">其他费用：{{projectData.projectInvestmentInfo.otherCost}}万元</div>
                  <div
                    class="item-content"
                  >设备购置费：{{projectData.projectInvestmentInfo.equipmentAcquisitionCost}}万元</div>
                  <div
                    class="item-content"
                  >不可预见费用：{{projectData.projectInvestmentInfo.unforeseeableCost}}万元</div>
                  <div
                    class="item-content"
                  >项目建设亩均投资：{{projectData.projectInvestmentInfo.constructionAverageInvestment}}万元</div>
                  <div
                    class="item-content"
                  >新增耕地亩均投资：{{projectData.projectInvestmentInfo.cultivatedLandAverageInvestment}}万元</div>
                </div>
                <div style="clear:both;"></div>
              </div>
              <div style="clear:both;"></div>
            </div>
          </div>
          <div class="maintitle" style="margin-top:60px;">建设信息</div>
          <el-row :gutter="20" class="construction">
            <el-col :span="8">
              <div class="item1">
                <div class="title">预计建设总规模：</div>
                <div class="value">{{projectData.projectConstructionInfo.constructionTotalScale}}公顷</div>
                <div style="clear:both;"></div>
              </div>
              <div class="item1">
                <div class="title">预计复垦规模：</div>
                <div class="value">{{projectData.projectConstructionInfo.reclamationScale}}公顷</div>
                <div style="clear:both;"></div>
              </div>
              <div class="item1">
                <div class="title">预计新增开发耕地面积：</div>
                <div
                  class="value"
                >{{projectData.projectConstructionInfo.increaseDevelopmentCultivatedLandArea}}公顷</div>
                <div style="clear:both;"></div>
              </div>
              <div class="item1">
                <div class="title">预计可用与占补平衡面积：</div>
                <div class="value">{{projectData.projectConstructionInfo.balancedArea}}公顷</div>
                <div style="clear:both;"></div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="item2">
                <div class="title">预计整理规模：</div>
                <div class="value">{{projectData.projectConstructionInfo.consolidationScale}}公顷</div>
                <div style="clear:both;"></div>
              </div>
              <div class="item2">
                <div class="title">预计新增耕地总面积：</div>
                <div
                  class="value"
                >{{projectData.projectConstructionInfo.increaseCultivatedLandTotalArea}}公顷</div>
                <div style="clear:both;"></div>
              </div>
              <div class="item2">
                <div class="title">预计新增复垦耕地面积：</div>
                <div
                  class="value"
                >{{projectData.projectConstructionInfo.increaseReclamationCultivatedLandArea}}公顷</div>
                <div style="clear:both;"></div>
              </div>
              <div class="item2">
                <div class="title">预计建成高标准基本农田规模：</div>
                <div
                  class="value"
                >{{projectData.projectConstructionInfo.highStandardBasicFarmlandArea}}公顷</div>
                <div style="clear:both;"></div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="item3">
                <div class="title">预计开发规模：</div>
                <div class="value">{{projectData.projectConstructionInfo.developmentScale}}公顷</div>
                <div style="clear:both;"></div>
              </div>
              <div class="item3">
                <div class="title">预计新增整理耕地面积：</div>
                <div class="value">{{projectData.projectConstructionInfo.increaseArableLandArea}}公顷</div>
                <div style="clear:both;"></div>
              </div>
              <div class="item3">
                <div class="title">预计基本农田整理规模：</div>
                <div
                  class="value"
                >{{projectData.projectConstructionInfo.basicFarmlandConsolidationScale}}公顷</div>
                <div style="clear:both;"></div>
              </div>
              <div class="item3">
                <div class="title">灾毁耕地面积：</div>
                <div
                  class="value"
                >{{projectData.projectConstructionInfo.damagedCultivatedLandArea}}公顷</div>
                <div style="clear:both;"></div>
              </div>
            </el-col>
          </el-row>
          <el-form
            :inline="true"
            label-position="left"
            :model="form"
            label-width="80px"
            ref="formData"
            :rules="formDataRules"
          >
            <div class="maintitle" style="margin-top:60px;">市局审查意见信息</div>
            <div class="formcontent">
              <el-form-item label="经办人审查意见" label-width="140px" style="display:block;">
                <el-input
                  readonly
                  v-model="form1.opinion"
                  style="width:1000px;"
                  type="textarea"
                  rows="5"
                ></el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="审查人" style="margin-right:60px;">
                <img style="width: 100px;" :src="`${baseUrl}${form1.signature}`" alt />
              </el-form-item>
              <el-form-item label="审查日期">
                <el-date-picker
                  readonly
                  v-model="form1.createTime"
                  type="datetime"
                  placeholder="审查日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="审查意见">
                <el-select disabled v-model="form1.status" placeholder="请选择">
                  <el-option label="同意" :value="0"></el-option>
                  <el-option label="拒绝" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="formcontent" style="margin-top:60px;">
              <el-form-item
                label="处室领导审查意见"
                label-width="140px"
                style="display:block;"
                prop="opinion"
              >
                <el-input
                  v-model="form.opinion"
                  style="width:1000px;"
                  type="textarea"
                  rows="5"
                  :readonly="isCurrentProcess"
                ></el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="审查人" style="margin-right:60px;">
                <img style="width: 100px;" :src="`${baseUrl}${form.signature || signature}`" alt />
              </el-form-item>
              <el-form-item label="审查日期">
                <el-date-picker
                  :readonly="isCurrentProcess"
                  v-model="form.createTime"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  placeholder="审查日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="审查意见">
                <el-select v-model="form.status" placeholder="请选择" :disabled="isCurrentProcess">
                  <el-option label="同意" :value="0"></el-option>
                  <el-option label="拒绝" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div style="margin-top:40px;">
              <el-form-item>
                <el-button type="primary" @click="addAdvice" v-if="!isCurrentProcess">提交</el-button>
                <el-button @click="$router.push('/projectManagement/planningStage/dealwith')">返回</el-button>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="审查流程" name="second">
        <process :processData="processData"></process>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import process from "../public/process";
import config from "@/config/index.js";
import moment from "moment";
import {
  getInvAndCon,
  getAdvice,
  addAdvice,
  getSignature
} from "@/api/feasibilityStudy/countyReviewOpinions.js";
import { validateNotNull } from "@/utils/validate.js";
export default {
  components: {
    process: process
  },
  data() {
    return {
      projectId: localStorage.getItem("projectId"),
      form1: {
        signature: "",
        groupId: 2,
        projectId: localStorage.getItem("projectId"),
        type: 0,
        status: 0,
        opinion: "",
        createTime: ""
      },
      form: {
        signature: "",
        groupId: 2,
        projectId: localStorage.getItem("projectId"),
        type: 1,
        status: 0,
        opinion: "",
        createTime: moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
      },
      formDataRules: {
        opinion: [{ validator: validateNotNull, trigger: "blur" }]
      },
      activeName: "first",
      processData: {
        groupId: 2,
        projectId: localStorage.getItem("projectId")
      },
      projectData: {
        projectInvestmentInfo: {},
        projectConstructionInfo: {}
      },
      baseUrl: config.baseUrlImg,
      signature: ""
    };
  },
  computed: {
    isCurrentProcess: function() {
      let isTrue =
        localStorage.getItem("key") == "FEASIBILITY_STUDY_CITY_BUREAU_1";
      if (localStorage.getItem("lookStatus") == 2) {
        isTrue = false;
      }
      return !isTrue;
    }
  },
  async created() {
    const loading = this.$loading({
      lock: true,
      text: "Loading",
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.7)"
    });
    await this.getInvAndCon();
    await this.getAdvice();
    await this.getAdvice1();
    await this.getSignature();
    loading.close();
  },
  methods: {
    moment,
    getInvAndCon() {
      //获取项目投资和建设信息
      return new Promise((resolve, reject) => {
        getInvAndCon({ projectId: this.projectId })
          .then(res => {
            resolve();
            this.projectData = res.data;
            //计算工程施工费
            this.projectData.projectInvestmentInfo.totalNum =
              this.projectData.projectInvestmentInfo.roadProjectCost +
              this.projectData.projectInvestmentInfo.landLevelingProjectCost +
              this.projectData.projectInvestmentInfo
                .waterConservancyProjectCost +
              this.projectData.projectInvestmentInfo
                .ecologicalProtectionProjectCost +
              this.projectData.projectInvestmentInfo.otherConstructionCost;
            //其他费用计算s
            this.projectData.projectInvestmentInfo.totalCost =
              this.projectData.projectInvestmentInfo.equipmentAcquisitionCost +
              this.projectData.projectInvestmentInfo.unforeseeableCost +
              this.projectData.projectInvestmentInfo
                .constructionAverageInvestment +
              this.projectData.projectInvestmentInfo
                .cultivatedLandAverageInvestment +
              this.projectData.projectInvestmentInfo.otherCost;
          })
          .catch(res => {
            loading.close();
          });
      });
    },
    getAdvice() {
      //获取处室负责人审查意见
      return new Promise((resolve, reject) => {
        getAdvice({ projectId: this.projectId, groupId: 2, type: 0 })
          .then(res => {
            resolve();
            if (res.data) {
              this.form1 = res.data;
            }
          })
          .catch(res => {
            loading.close();
          });
      });
    },
    getAdvice1() {
      //获取市局领导审查意见
      return new Promise((resolve, reject) => {
        getAdvice({ projectId: this.projectId, groupId: 2, type: 1 })
          .then(res => {
            resolve();
            if (res.data) {
              this.form = res.data;
            }
          })
          .catch(res => {
            loading.close();
          });
      });
    },
    addAdvice() {
      //生成审查意见表
      this.$refs["formData"].validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
          this.form.signature = this.signature;
          this.form.projectId = this.projectId;
          addAdvice(this.form)
            .then(res => {
              loading.close();
              this.$message({
                message: "提交成功！",
                type: "success"
              });
              this.$router.push("/projectManagement/planningStage/dealwith");
            })
            .catch(res => {
              loading.close();
            });
        }
      });
    },
    getSignature() {
      //获取用户签名
      return new Promise(resolve => {
        getSignature()
          .then(res => {
            this.signature = res.data;
            resolve();
          })
          .catch(res => {
            loading.close();
          });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.maincontent {
  margin: 10px;
  box-sizing: border-box;
  background: #ffffff;
  padding: 20px;
  .investmentSituation {
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    padding: 20px;
  }
  .maintitle {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 25px;
    color: #4d4d4d;
  }
  .investmentmsg {
    .totalInvestment {
      width: 250px;
      height: 160px;
      margin-right: 30px;
      float: left;
      position: relative;
      margin-top: 15px;
      .contentbox {
        width: 242px;
        height: 100%;
        background: #f6a924;
        .title {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 20px;
          margin-left: 30px;
          padding-top: 30px;
          color: #ffffff;
        }
        .value {
          font-size: 40px;
          font-family: PingFang SC;
          font-weight: bold;
          line-height: 56px;
          margin-top: 14px;
          color: #ffffff;
          text-align: center;
          span {
            font-size: 13px;
            font-family: PingFang SC;
            font-weight: 500;
            line-height: 18px;
          }
        }
      }
      .youjiantou {
        position: absolute;
        width: 0;
        height: 0;
        border-width: 22px 0 22px 13px;
        border-style: solid;
        border-color: transparent transparent transparent #f6a924;
        right: 0;
        top: 59%;
        margin-top: -30px;
      }
    }
    .childInvestment {
      width: 480px;
      height: 160px;
      float: left;
      margin-top: 15px;
      .leftbox {
        width: 240px;
        height: 160px;
        float: left;
        border-radius: 4px;
        .title {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 20px;
          margin-left: 30px;
          padding-top: 30px;
          color: #ffffff;
        }
        .value {
          font-size: 40px;
          font-family: PingFang SC;
          font-weight: bold;
          line-height: 56px;
          margin-top: 14px;
          color: #ffffff;
          text-align: center;
          span {
            font-size: 13px;
            font-family: PingFang SC;
            font-weight: 500;
            line-height: 18px;
          }
        }
      }
      .rightbox {
        width: 240px;
        height: 160px;
        float: left;
        padding-top: 20px;
        padding-left: 30px;
        background: #f3f6f8;
        border-radius: 4px;
        .item-content {
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 18px;
          color: #969899;
          margin-bottom: 7px;
        }
      }
    }
  }

  .formcontent {
    margin-top: 30px;
    .secondtitle {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 20px;
      color: #666666;
      span {
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 18px;
        margin-right: 30px;
        color: #a6a6a6;
      }
    }
    .purchaseExpense {
      margin-top: 20px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 20px;
      color: #666666;
      span {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 20px;
        color: #a6a6a6;
        margin-right: 60px;
      }
    }
    .allInvestment {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: bold;
      line-height: 20px;
      margin-top: 20px;
      color: #333333;
      span {
        font-weight: 500;
      }
    }
  }
  .construction {
    padding-top: 10px;
    .item1 {
      margin-top: 20px;
      .title {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 20px;
        color: #666666;
        float: left;
        width: 170px;
        text-align: right;
      }
      .value {
        float: left;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 20px;
        color: #a6a6a6;
      }
    }
    .item2 {
      margin-top: 20px;
      .title {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 20px;
        color: #666666;
        float: left;
        width: 200px;
        text-align: right;
      }
      .value {
        float: left;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 20px;
        color: #a6a6a6;
      }
    }
    .item3 {
      margin-top: 20px;
      .title {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 20px;
        color: #666666;
        float: left;
        width: 160px;
        text-align: right;
      }
      .value {
        float: left;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 20px;
        color: #a6a6a6;
      }
    }
  }
}
</style>